<template>
    <div class="current-ipt">
        <div class="current-info">
            <h3 class="main-title">
                <span>人员基本信息</span>
                <template>
                    <span v-show="isTrue" style="font-size: 6px; color: #faad14">
                        <i class="el-icon-warning-outline"></i>
                        当前身份证号已存在要素列表中，如果保存将覆盖原有要素信息</span
                    >
                </template>
                <div class="operate">
                    <span class="expand-button" @click="handleUpdateVis">
                        <template v-if="value.isOpenCard">
                            <i class="el-icon-arrow-down"></i>
                        </template>
                        <template v-else>
                            <i class="el-icon-arrow-up"></i>
                        </template>
                    </span>
                    <span class="delete-button" @click="handleDelCard">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
            </h3>

            <el-form v-if="value.isOpenCard" label-width="100px" :model="value" label-suffix="：">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="value.xm[0]"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input ref="ipt" placeholder="请输入身份证号" v-model="value.sfz[0]"> </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="current-relation" v-if="value.isOpenCard">
            <h3 class="main-title">
                <span>关联信息</span>
            </h3>
            <div class="current-relation__box">
                <div v-for="(ys_item, ys_idx) in ysList" :key="ys_idx">
                    <div v-for="(child, _i) in ys_item.ysnr" :key="_i" class="current-relation__item">
                        <dg-select
                            class="current-relation__select"
                            v-model="ys_item.yslx"
                            :data="yslxOption"
                        ></dg-select>
                        <div class="current-relation__input">
                            <el-input v-model="ys_item.ysnr[_i]"></el-input>
                            <div class="current-relation__btngroup">
                                <el-button class="current-relation__sub" @click="handleAdd">
                                    <i class="el-icon-plus"></i>
                                </el-button>
                                <el-button
                                    class="current-relation__sub"
                                    :disabled="otherInfoLen == 1"
                                    @click="handleDel(ys_idx, _i)"
                                >
                                    <i class="el-icon-minus"></i>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//  import operateApi from "@/api/xsgl/xsgl_gdzs/operateApi";
import { mapState } from "vuex";
export default {
    name: "current-ipt",
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        value: {
            type: Object,
            default() {
                return {
                    xm: "",
                    rygs: "",
                    sxsjs: "",
                    sfz: "",
                    rylb: "",
                    gzqk: "",
                    ysList: [{ yslx: "", ysnr: [] }],
                    isOpenCard: true
                };
            }
        },
        yslxMap: {
            type: Object,
            default() {
                return {};
            }
        },
        sfzList: Array
    },
    data() {
        return {
            data: [],
            treeProps: {
                value: "value"
            },
            ysList: [],
            isTrue: false // 判断身份证是否已经存在要素列表中
        };
    },
    computed: {
        otherInfoLen() {
            let len = 0;
            this.ysList.forEach((ele) => {
                len += ele.ysnr.length;
            });
            return len;
        },

        yslxOption() {
            // 要素类型下拉框
            let result = [];
            if (!_.isEmpty(this.yslxMap)) {
                for (let key in this.yslxMap) {
                    // 身份证号，姓名排除
                    if ([this.constant.SFZH_DM, this.constant.XM_DM].includes(key)) {
                        continue;
                    }
                    let result_item = {
                        value: key,
                        label: this.yslxMap[key]
                    };
                    result.push(result_item);
                }
            }

            return result;
        },
        ...mapState(["constant"])
    },
    created() {
        // 关联信息
        this.ysList = JSON.parse(JSON.stringify(this.value.ysList));
    },
    watch: {
        value: {
            deep: true,
            immediate: true,
            handler(new_val, old_val) {
                if (!_.isEqual(new_val, old_val)) {
                    this.$emit("change", new_val);
                    this.sfz(new_val.sfz); // 判断该要素身份证信息是否存在要素列表
                }
            }
        }
    },
    methods: {
        // 判断改身份证是否已在要素列表数据中
        sfz(new_sfz) {
            let index = _.findIndex(this.sfzList, function (o) {
                return o == new_sfz;
            });
            this.isTrue = index > -1 ? true : false;
        },
        // 新增一项关联信息
        handleAdd() {
            this.ysList.push({ yslx: "", ysnr: [""] });
        },
        /**
         * 删除关联信息
         * @param {number} index 当前索引
         */
        handleDel(father, child) {
            this.ysList[father].ysnr.splice(child, 1);

            //  this.$delete(this.value["ysList"], index);
        },

        /**
         * 删除当前卡片
         * @param {number} index 当前索引
         */
        handleDelCard() {
            this.$emit("delCard", this.value);
        },

        /**
         * 更新状态
         */
        handleUpdateVis() {
            this.value["isOpenCard"] = !this.value["isOpenCard"];
        }
    }
};
</script>
<style lang="scss" scoped>
.current-ipt {
    margin-top: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    padding: 0 18px 0 32px;
    user-select: none;

    /deep/ .el-form .el-form-item {
        margin-bottom: 16px;
    }

    .operate {
        display: flex;
        justify-content: space-between;
        width: 40px;
    }
}

.current-relation {
    &__box {
    }

    &__item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    &__sub {
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__select {
        width: 96px;
    }

    &__input {
        display: flex;
        flex: 1;
        margin-left: 8px;

        .current-relation__btngroup {
            display: flex;
            margin-left: 8px;
        }
    }
}

.main-title {
    justify-content: space-between;

    .add-button {
        display: block;
        width: 32px;
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        i {
            color: rgba(0, 0, 0, 0.45);
        }
    }

    .expand-button,
    .delete-button {
        cursor: pointer;
    }
}
</style>
